{% extends "base.html" %}

{% block title %}信访台账{% endblock %}

{% block extra_css %}
<link href="/static/css/analysis-result-details.css" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- 页面标题 -->
    <div class="flex justify-between items-center">
        <div>
            <h2 class="text-xl font-semibold text-slate-800">信访台账</h2>
            <p class="text-slate-600 mt-1">查看和管理所有信访记录的详细信息</p>
            <div id="currentTaskInfo" class="mt-3 hidden">
                <div class="bg-blue-50 border border-blue-200 rounded-md p-3">
                    <div class="flex items-center">
                        <i class="fas fa-info-circle text-blue-600 mr-2"></i>
                        <span class="text-sm text-blue-800">
                            当前筛选：分析任务 <span id="currentTaskName" class="font-medium"></span>
                        </span>
                        <button onclick="clearTaskFilter()" class="ml-auto text-blue-600 hover:text-blue-800 text-sm">
                            <i class="fas fa-times mr-1"></i>清除筛选
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex space-x-3">
            <button id="exportBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                <i class="fas fa-download mr-2"></i>导出数据
            </button>
        </div>
    </div>

    <!-- 查询条件区域 -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
        <form id="searchForm">
            <div class="grid grid-cols-1 md:grid-cols-5 gap-6">
            <!-- 任务选择 -->
            <div class="filter-select-wrapper">
                <select id="analysisTask" name="task_id"
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="">全部任务</option>
                </select>
            </div>

            <!-- 搜索关键词 -->
            <div class="filter-select-wrapper">
                <input type="text" id="searchTerm" name="search_term"
                       class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                       placeholder="信访人、内容或地区">
            </div>

            <!-- 时间范围 -->
            <div>
                <div class="flex space-x-2">
                    <input type="date" id="startDate" name="start_date"
                           class="flex-1 px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                           placeholder="开始日期">
                    <input type="date" id="endDate" name="end_date"
                           class="flex-1 px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                           placeholder="结束日期">
                </div>
            </div>

            <!-- 地区选择 -->
            <div class="filter-select-wrapper">
                <select id="region" name="region"
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="">全部地区</option>
                </select>
            </div>

            <!-- 投诉类型 -->
            <div class="filter-select-wrapper">
                <select id="complaintType" name="complaint_type"
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="">全部类型</option>
                    <option value="环境污染">环境污染</option>
                    <option value="噪音污染">噪音污染</option>
                    <option value="水质问题">水质问题</option>
                    <option value="空气污染">空气污染</option>
                </select>
            </div>

            <!-- 操作按钮 -->
             <!-- 
            <div class="flex space-x-2">
                <button id="resetSearch"
                        class="flex-1 px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                    <i class="fas fa-redo"></i>
                </button>
            </div> -->
        </div>

        <!-- 第二行查询条件 -->
        <div class="grid grid-cols-1 md:grid-cols-5 gap-6 mt-6">
            <!-- 情感类型 -->
            <div class="filter-select-wrapper">
                <select id="sentiment" name="sentiment"
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="">全部情感</option>
                    <option value="负面">负面</option>
                    <option value="中性">中性</option>
                    <option value="正面">正面</option>
                </select>
            </div>

            <!-- 合规状态 -->
            <div class="filter-select-wrapper">
                <select id="complianceStatus" name="compliance_status"
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="">全部状态</option>
                    <option value="合规">合规</option>
                    <option value="不合规">不合规</option>
                    <option value="部分合规">部分合规</option>
                </select>
            </div>

            <!-- 重复信访 -->
            <div class="filter-select-wrapper">
                <select id="hasDuplicates" name="has_duplicates"
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="">全部</option>
                    <option value="true">有重复</option>
                    <option value="false">无重复</option>
                </select>
            </div>

            <!-- 刷新按钮 -->
            <div class="flex items-end">
                <button id="refreshBtn" class="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors">
                    <i class="fas fa-sync-alt mr-2"></i>刷新
                </button>
            </div>
        </div>
        </form>
    </div>

    <!-- 结果统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="stat-card bg-white rounded-xl border border-slate-200 p-4 hover:shadow-lg transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-slate-600 font-medium">总信访数</p>
                    <p class="text-2xl font-bold text-slate-800 mt-1" id="totalPetitions">0</p>
                </div>
                <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-clipboard-list text-white text-lg"></i>
                </div>
            </div>
        </div>
        <div class="stat-card bg-white rounded-xl border border-slate-200 p-4 hover:shadow-lg transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-slate-600 font-medium">地区分布</p>
                    <p class="text-2xl font-bold text-slate-800 mt-1" id="regionCount">0</p>
                </div>
                <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-green-600 rounded-xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-map-marker-alt text-white text-lg"></i>
                </div>
            </div>
        </div>
        <div class="stat-card bg-white rounded-xl border border-slate-200 p-4 hover:shadow-lg transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-slate-600 font-medium">重复信访</p>
                    <p class="text-2xl font-bold text-slate-800 mt-1" id="duplicateCount">0</p>
                </div>
                <div class="w-12 h-12 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-exclamation-triangle text-white text-lg"></i>
                </div>
            </div>
        </div>
        <div class="stat-card bg-white rounded-xl border border-slate-200 p-4 hover:shadow-lg transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-slate-600 font-medium">本月新增</p>
                    <p class="text-2xl font-bold text-slate-800 mt-1" id="monthlyCount">0</p>
                </div>
                <div class="w-12 h-12 bg-gradient-to-br from-purple-400 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-chart-line text-white text-lg"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 数据表格 -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full divide-y divide-slate-200 table-auto">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">ID</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">信访人</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">信访内容</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">地区</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">分析状态</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">情感类型</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">投诉类型</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">合规状态</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">重复信访</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">创建时间</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">操作</th>
                    </tr>
                </thead>
                <tbody id="dataTableBody" class="bg-white divide-y divide-slate-200">
                    <!-- 数据将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>

        <!-- 分页控件 -->
        <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-slate-200 sm:px-6">
            <div class="flex-1 flex justify-between sm:hidden">
                <button id="prevPageMobile" class="relative inline-flex items-center px-4 py-2 border border-slate-300 text-sm font-medium rounded-lg text-slate-700 bg-white hover:bg-slate-50">
                    上一页
                </button>
                <button id="nextPageMobile" class="ml-3 relative inline-flex items-center px-4 py-2 border border-slate-300 text-sm font-medium rounded-lg text-slate-700 bg-white hover:bg-slate-50">
                    下一页
                </button>
            </div>
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div class="flex items-center space-x-4">
                    <p class="text-sm text-slate-700">
                        显示第 <span id="startRecord" class="font-medium">1</span> 到 <span id="endRecord" class="font-medium">10</span> 条，
                        共 <span id="totalRecordsTable" class="font-medium">0</span> 条记录
                    </p>
                    <div class="flex items-center space-x-2">
                        <label for="pageSizeSelect" class="text-sm text-slate-700">每页显示</label>
                        <select id="pageSizeSelect" class="border border-slate-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            <option value="10">10条</option>
                            <option value="20">20条</option>
                            <option value="50">50条</option>
                            <option value="100">100条</option>
                        </select>
                    </div>
                </div>
                <div>
                    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" id="paginationControls">
                        <!-- 分页按钮将通过JavaScript动态生成 -->
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 导出选项模态框 -->
<div id="exportModal" class="fixed inset-0 bg-slate-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-6 border w-96 shadow-xl rounded-xl bg-white">
        <div class="mt-3">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-slate-800">导出选项</h3>
                <button id="closeExportModal" class="text-slate-400 hover:text-slate-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">导出格式</label>
                    <select id="exportFormat" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="json">JSON</option>
                        <option value="csv">CSV</option>
                        <option value="excel">Excel</option>
                    </select>
                </div>

                <div class="flex justify-end space-x-3">
                    <button id="cancelExport" class="px-4 py-2 border border-slate-300 rounded-lg text-slate-700 hover:bg-slate-50">
                        取消
                    </button>
                    <button id="confirmExport" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
                        导出
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 加载提示 -->
<div id="loadingOverlay" class="fixed inset-0 bg-slate-600 bg-opacity-50 hidden flex items-center justify-center z-50">
    <div class="bg-white p-6 rounded-xl shadow-xl">
        <div class="flex items-center">
            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
            <span class="ml-3 text-slate-700">加载中...</span>
        </div>
    </div>
</div>

<script src="/static/js/petition-ledger/petition-ledger.js"></script>
{% endblock %}